<template>
	<view class="s-progress_line" :style="{'--height':n_height,'--round':n_round,'--bg':bgColor,'--color':color,'--val':n_value+'%'}">
		<view class="s-progress_line_txta" :style="{'--color':'#fff'}">
			<slot><template v-if="showPercent">{{n_value}}%</template></slot>
		</view>
		<view class="s-progress_line_txtb" :style="{ left: n_value + '%','--bg':bgColor,} ">
			<view class="s-progress_line_txtc" :style="{'--left':`-${this.n_value}%`,color,'--bg':bgColor,'--height':n_height}">
				<slot><template v-if="showPercent">{{n_value}}%</template></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"com-progress-line",
		props: {
			percent: { type: Number, default: 0 },//进度 取值范围0~100
			showPercent: { type: Boolean, default: true },//是否显示百分数
			height: { type: [String,Number], default: "40" },// 高度，传值需要包含单位
			bgColor: { type: String, default: "#ebebeb"}, //背景条颜色
			color: { type: String, default: "#00ba5a"}, //进度条激活部分的颜色
			round: { type: [String,Number], default: 40 }, //圆角大小
		},
		computed: {
			n_value(){ return this.percent >= 100 ? 100 : this.percent;},
			n_height(){ return uni.upx2px(parseInt(this.height) || 40)+'px'; },
			n_round() { return uni.upx2px(parseInt(this.round) || 0)+'px'; },
		},
	}
</script>

<style lang="scss" scoped>
@import "../../libs/style/conmon.scss";

</style>